<template>
	<view class="my-search">
		<view class="search-box">
			<uni-search-bar @input="input" :radius="50" cancelButton="none"></uni-search-bar>
		</view>

		<scroll-view scroll-y="true" :style="{height: wh + 'px'}" :scroll-top="scrollTop">
			<view class="cu-list menu text-left">
				<view class="cu-item" v-for="(item,index) in searchResults" :key="item.id" @click="clickHandle(item)">
					<view class="content">
						<view>{{item.name}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: "my-search",
		data() {
			return {
				timer: null,
				kw: '', //搜索
				searchResults: [],
				wh: 0,
				allData: [{
						"name": "罗秀兰",
						"id": "48"
					},
					{
						"name": "白杰",
						"id": "92"
					},
					{
						"name": "余磊",
						"id": "94"
					},
					{
						"name": "孙霞",
						"id": "95"
					},
					{
						"name": "韩霞",
						"id": "43"
					},
					{
						"name": "萧磊",
						"id": "86"
					},
					{
						"name": "任伟",
						"id": "20"
					},
					{
						"name": "叶明",
						"id": "8"
					},
					{
						"name": "邓秀兰",
						"id": "64"
					},
					{
						"name": "徐霞",
						"id": "78"
					},
					{
						"name": "谭磊",
						"id": "92"
					},
					{
						"name": "叶秀兰",
						"id": "3"
					},
					{
						"name": "袁洋",
						"id": "68"
					},
					{
						"name": "冯平",
						"id": "68"
					},
					{
						"name": "陈勇",
						"id": "62"
					},
					{
						"name": "曾磊",
						"id": "38"
					},
					{
						"name": "秦桂英",
						"id": "56"
					},
					{
						"name": "黎军",
						"id": "75"
					},
					{
						"name": "龚艳",
						"id": "33"
					},
					{
						"name": "叶娜",
						"id": "62"
					},
					{
						"name": "廖桂英",
						"id": "39"
					},
					{
						"name": "杨强",
						"id": "74"
					},
					{
						"name": "谢秀英",
						"id": "41"
					},
					{
						"name": "丁娜",
						"id": "89"
					},
					{
						"name": "金勇",
						"id": "10"
					},
					{
						"name": "吴洋",
						"id": "90"
					},
					{
						"name": "许强",
						"id": "79"
					},
					{
						"name": "李涛",
						"id": "75"
					},
					{
						"name": "余洋",
						"id": "12"
					},
					{
						"name": "冯超",
						"id": "6"
					},
					{
						"name": "黄娟",
						"id": "64"
					},
					{
						"name": "宋秀英",
						"id": "58"
					},
					{
						"name": "冯敏",
						"id": "12"
					}
				]
			};
		},
		methods: {
			input(value) {
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.kw = value
					this.getSearchList()
				}, 500)
			},
			async getSearchList() {
				console.warn(this.kw.value);
				// 判断搜索关键词是否为空
				if (this.kw.value.length === 0) {
					this.searchResults = this.allData
					return
				}
				const message = [{
						"name": "刘娜",
						"id": "71"
					},
					{
						"name": "卢桂英",
						"id": "81"
					},
					{
						"name": "黎明",
						"id": "15"
					},
					{
						"name": "钱娜",
						"id": "6"
					},
					{
						"name": "史敏",
						"id": "92"
					},
					{
						"name": "杜伟",
						"id": "37"
					},
					{
						"name": "汪娟",
						"id": "61"
					},
					{
						"name": "顾磊",
						"id": "96"
					},
					{
						"name": "赖桂英",
						"id": "68"
					},
					{
						"name": "廖平",
						"id": "80"
					}
				]
				this.searchResults = message
			},
			clickHandle(value) {
				console.log(value);
				this.$emit('changeChoose', {
					value
				})
			}
		},
		onReady() {
			const sysInfo = uni.getSystemInfoSync()
			this.wh = sysInfo.windowHeight - 50
			console.log(this.wh);
			this.searchResults = this.allData
		}
	}
</script>

<style lang="scss">
	.my-search {
		width: 100%;
	}
</style>
